<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>bootstrap的form表单布局</title>
		<!---引入jquery资源--->
		<script type="text/javascript" src="${basePath }static/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
		<!--引入bootstrap的核心js资源文件--->
		<script type="text/javascript" src="${basePath }static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<!--引入bootstrap的核心css资源文件--->
		<link rel="stylesheet" type="text/css" href="${basePath }static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<!-- 分页插件 -->
		<script type="text/javascript" src="${basePath }static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>
		<link rel="stylesheet" type="text/css" href="${basePath }static/paginationjs-master-2.1.0/dist/pagination.css" />		
		<!-- layer弹出层插件 -->
		<script src="${basePath }static/Hplus-v.4.1.0/js/plugins/layer/layer.min.js"></script>
		<script type="text/javascript">
		function doAjaxQuery(pageNum){
			// console.info("here");
			$.ajax({
				   // 请求类型
				   type: "POST",
				   // 服务器url
				   url: "${basePath }ajaxQueryAdminInfo2",
				   // 发送的数据
				   data: $("#myForm").serialize(),
				   // responseText转换的数据类型为json对象类型
				   dataType:"json",
				   // 成功之后回调方法，方法的参数是服务器响应的内容也就是ajax引擎获取到responseText内容
				   success: function(data){
					 //console.info("ajax:");  
					 //console.info(data);
					 // ajax查询成功之后，调用分页插件进行分页处理
					 doPaging(pageNum,data);
				   },
				   error:function(){
					   alert("error...");
				   }
				});
		}
		// 进行分页操作
		function doPaging(pageNum,pageData){
			// 默认是第一页
			if(!pageNum){
				// 当前显示的页码
				pageNum = 1;
			}
			// 加载分页插件，并进行初始化处理
			$('#myPager').pagination({
			    dataSource: pageData,
			    pageNumber: pageNum, // 加载之后显示的页码
			    pageSize: 2, // 每页显示的记录条数
			    showGoInput: true,
			    showGoButton: true,
			    // 分页之后的回调处理，用于显示分页的列表信息
			    callback: function(data, pagination) {
			        // data-当前页的数据
			        // 进行解析，并进行显示
			        dataTemplate(data);
			        // 分页控件的信息
			        //console.info("分页控件的信息");
			        //console.info(pagination);
			    }
			})
			
		}
		// 表格数据显示处理
		function dataTemplate(data){
			// 显示结果串
			 var strContent = "";
			 if(data){						
				 // 解析数据结果
				 $.each(data,function(index,ev){
					 strContent +="<tr>";
					 strContent +="<th>";
					 strContent +=(index+1);
					 strContent +="</th>";
					 
					 strContent +="<td>";
					 strContent +=ev.adminname2;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.amdinsex;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.amdinage;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.admintel;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.adminemail;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.admincreatetime;
					 strContent +="</td>";
					 
					 //修改按钮
					 strContent +="<td>";
					 strContent +="<a href='javascript:showLayer("+ev.adminid+")'>修改</a>"
					 strContent +="</td>";
					 
					//删除按钮
					 strContent +="<td>";
					 strContent +="<a href='javascritp:;' onclick='myConfirm(\"是否删除用户名["+ev.adminname2+"]记录\","+ev.adminid+");'>删除</a>"
					 strContent +="</td>";
					 
					 strContent +="</tr>";
				 });						 
			 }  
			 // 解析结果集完成之后，将需要显示的内容添加到dom控件中 （Ajax回调函数的局部刷新操作）
			 $("#querytbody").html(strContent);  
		     //console.info(data);
		}
		
		///////////////////////////////////////////////////
		function myConfirm(msg,uid){
			parent.layer.confirm(msg, {
				  btn: ['确定','取消'] //按钮
				}, function(index){
				  // 确定的回调函数
				  //return false;
				  console.info("uid:"+uid);
				  // 关闭  
				  //调动删除操作的ajax请求
				  $.ajax({
				   // 请求类型
				   type: "GET",
				   // 服务器url
				   url: "${basePath }doAjaxAdminInfoDelete?uid="+uid,
				   // 发送的数据
				   //data: ,
				   // responseText转换的数据类型为json对象类型
				   //dataType:"json",
				   // 成功之后回调方法，方法的参数是服务器响应的内容也就是ajax引擎获取到responseText内容
				   success: function(data){
					 //console.info("ajax:");  
					 //console.info(data);
					 // ajax查询成功之后，调用分页插件进行分页处理
					 //doPaging(pageNum,data);
					 //删除成功
					 console.info("删除成："+data);
					 // 删除完了进行查询
					 var currentPageNum = $("#myPager ul>li").filter(".active").attr("data-num");
					 doAjaxQuery(currentPageNum);
				   }
				});
					parent.layer.close(index);
				}, function(){
				  // 取消回调函数
					//return false;
				});
		}
		function showLayer(aid){
			layer.ready(function(){			
			var index = parent.layer.open({
				  type: 2,
				  resize:true,
				  title: '管理员信息修改',
				  //shadeClose: false,
				  shade: 0.8,
				  area: ['800px', '600px'],
				  content: "${basePath}doAdminInfoModify?uid="+aid, //iframe的url
				  btn: ['确定', '取消'],
				  yes: function(index, layero){
					    //按钮【按钮一】的回调
					    //console.info("你点击了确定按钮");
					    // 关闭弹窗
					    //当你在iframe页面关闭自身时
						//var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						// 获取弹窗中的iframe的dom对象
						var body = parent.layer.getChildFrame('body', index);
						//parent.layer.close(index); //再执行关闭 
    					console.info("body:");
    					console.info(body.find("#btnUpdate").length);
						body.find("#btnUpdate").click();
						//parent.layer.close(index); //再执行关闭 
    					//var iframeWin = window[layero.find('iframe')[0]['adminInfoModifyForm']]; //得到iframe页的窗口对象，执行iframe页的方法：
    					//console.info("iframeWin:");
    					//console.info(iframeWin);
					  },
				  btn2:function(index, layero){
					  console.info("你点击了取消按钮");
				  },	  
				  cancel: function(){ 
						    //右上角关闭回调
						    
						    //return false 开启该代码可禁止点击该按钮关闭
				  },
				  end:function(){
					  //弹出层关闭之后，再次调用ajax的查询方法，显示修改只有的数据
					  // 获取当前的页码
					  //console.info("当前页码：");
					  //console.info($("#myPager ul>li").filter(".active").attr("data-num"));
					  var currentPageNum = $("#myPager ul>li").filter(".active").attr("data-num");
					  doAjaxQuery(currentPageNum);
				  }
				}); 
			});
		}
		</script>
	</head>

	<body style="width:95%">
		<form class="form-horizontal" id="myForm">
			<div class="form-group">
			</div>
			<div class="form-group">
				<label for="txtName" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminName" name="adminname2" placeholder="请输入用户名">
				</div>
				<label for="txtEmail" class="col-sm-2 control-label">邮箱</label>
				<div class="col-sm-3">
					<input type="email" class="form-control" id="adminEmail" name="adminemail" placeholder="请输入邮箱">
				</div>
			</div>
			<div class="form-group">
				
				<label for="txtSex" class="col-sm-2 control-label">性别</label>
				<div class="col-sm-3">
					<label class="radio-inline">
  						<input type="radio" name="amdinsex" id="amdinSex1" value="男"> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="amdinsex" id="amdinSex2" value="女"> 女
					</label>
					<label class="radio-inline">
						<input type="radio" name="amdinsex" id="amdinSex3" value=""> 性别不限
					</label>					
				</div>
				<label for="txtName" class="col-sm-2 control-label">电话</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminTel" name="admintel" placeholder="请输入电话">
				</div>
			</div>
			<div class="form-group">
				
				<label for="txtPsw" class="col-sm-2 control-label">年龄</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="amdinAge" name="amdinage" placeholder="请输入年龄">
					<input type="text" class="form-control" id="amdinAge2" name="amdinage2" placeholder="请输入年龄">
				</div>
				<label for="txtName" class="col-sm-2 control-label">创建日期</label>
				<div class="col-sm-3">
					<input type="date" class="form-control" id="adminCreateTime" name="admincreatetime" placeholder="请输入创建时间">
					<input type="date" class="form-control" id="adminCreateTime2" name="admincreatetime" placeholder="请输入创建时间">
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-4 col-sm-1">
					<button type="button" class="btn btn-default" onclick="doAjaxQuery(1);">查&nbsp;&nbsp;询</button>
				</div>
				<div class="col-sm-offset-1 col-sm-1">
					<button type="reset" class="btn btn-default">重&nbsp;&nbsp;置</button>
					
					<button type="button" class="btn btn-default" onclick="showLayer(3)">弹&nbsp;&nbsp;框</button>
				</div>
			</div>
		</form>
		<div class="bs-example" data-example-id="hoverable-table">
		<table class="table table-hover">
			<thead>
			
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>电话</th>
					<th>邮箱</th>
					<th>创建时间</th>
					<th>修改</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody id="querytbody">
				
			</tbody>
		</table>
		<div id="myPager" class="data-container">
        
		</div>
	</div>
	</body>

</html>